<template>
    <view class="info br-24 mt-24">
        <view class="align-center space-between pl-30 pr-30 pt-28 mb-8">
            <view class="ft-32 bold t-3">续订信息</view>
            <view class="align-center space-between">
                <hj-number-box
                    v-model="count"
                    :max="99"
                    unit="晚"
                    size="44rpx"
                    @change="handleChange"
                />
            </view>
        </view>
        <view class="pl-30 pr-30 ft-28 t-3">
            <view class="info-list flex">
                <view class="pr-20 height align-center">离店时间</view>
                <view class="flex-auto">
                    <view class="height align-center">
                        {{ endDate || '' }}
                    </view>
                </view>
            </view>
			<view class="info-list flex">
			    <view class="pr-20 height align-center">房间数量</view>
			    <view class="flex-auto">
			        <view class="height align-center">
			            {{ info?.roomCount || 0 }}间
			        </view>
			    </view>
			</view>
            <view class="info-list flex">
                <view class="pr-20 height align-center">住客姓名</view>
                <view class="flex-auto">
                    <view class="height align-center"> {{ info.contactName || '' }} </view>
                </view>
            </view>

            <view class="info-list flex">
                <view class="pr-20 height align-center">联系电话</view>
                <view class="flex-auto">
                    <view class="height align-center"> {{ info.contactPhone || '' }} </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
/**
 * @description
 * @author yinzhi
 * @date 2025-05
 */
import { ref, computed, defineComponent } from 'vue'
import dayjs from 'dayjs/esm/index'
defineComponent({
    name: 'UserInfo'
})
// 接收父组件传值
const props = defineProps({
    info: {
        type: Object,
        default: () => {}
    },
    day: {
        type: Number,
        default: 1
    }
})
const emit = defineEmits(['update:day', 'change'])

// 续租时间
const count = computed({
    get() {
        return props.day
    },
    set(newValue) {
        emit('update:day', newValue)
    }
})

// 结束时间
const endDate = computed(
    () => dayjs(props.info.checkOutDate).add(count.value, 'days').format('YYYY年MM月DD日') || ''
)

// 加减
const handleChange = e => {
    emit('change', e)
}
</script>

<style scoped lang="scss">
.info {
    background: $uni-bg-color;
    box-shadow: 0 0 10rpx 0 rgba($color: #000000, $alpha: 0.08);
    &-list {
        border-bottom: 1px solid $uni-bg-color-hover;
        .height {
            height: 96rpx;
        }
    }
    &-list:last-child {
        border: none;
    }
    .error-msg {
        border-bottom: 1px solid $uni-color-error;
        color: $uni-color-error;
        margin-top: -10rpx;
    }
}
</style>
